<template>
  <div class="cinema-detail-filter-container">
    <div class="date-tab">
      <nut-tabs
        :title-gutter="15"
        v-model="tabTimesIndex"
        type="smile"
        title-scroll
      >
        <nut-tab-pane
          v-for="(item, index) in tabTimesList"
          :pane-key="index"
          :title="`${item.t} ${item.a}`"
        >
        </nut-tab-pane>
      </nut-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, toRefs, watch } from "vue";
import moment from "moment";
const tabTimesIndex = ref(0);
const tabTimesList: any = ref([]);
const props = defineProps({
  //子组件接收父组件传递过来的值
  data: Object,
});
//使用父组件传递过来的值
const { data: timesList } = toRefs(props);
onMounted(() => {
  getTimes();
});
const emit = defineEmits(["onChanged"]);
watch(tabTimesIndex, (index) => {
  emit("onChanged", tabTimesList.value[index]);
});
//监听当前的
watch(tabTimesList, () => {
  emit("onChanged", tabTimesList.value[0]);
});
const getTimes = () => {
  const times = timesList?.value;

  const arr: any = [];
  times?.forEach((item) => {
    const time = item;
    let t = getweek(moment(time).startOf("day").format("E"));
    if (time === moment().format("YYYY-MM-DD")) {
      t = "今天";
    } else if (time === moment().subtract(-1, "days").format("YYYY-MM-DD")) {
      t = "明天";
    } else if (time === moment().subtract(-2, "days").format("YYYY-MM-DD")) {
      t = "后天";
    }
    arr.push({
      time: time,
      t: t,
      a: time.substr(5, 9),
    });
  });
  tabTimesList.value = arr;
};
const getweek = (val) => {
  const week = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
  return week[val - 1];
};
</script>
<style lang="scss">
.cinema-detail-filter-container {
  display: flex;
  flex-direction: column;

  .nut-tabs {
    overflow: scroll !important;
    .nut-tabs__titles {
      background: linear-gradient(
        to right,
        #d8ecfe,
        #d2e8fe,
        #cce5fe,
        #cde5ff,
        #c6e2ff,
        #c2dfff,
        #c1dffe
      ) !important;

      .nut-tabs__titles-item {
        .nut-tabs__titles-item__smile {
          display: none;
        }

        .nut-tabs__titles-item__text {
          color: #858a99;
          font-size: 22px !important;
        }
      }

      .nut-tabs__titles-item__line {
        border-radius: 30px !important;
      }

      .nut-tabs__titles-item.active {
        .nut-tabs__titles-item__smile {
          display: block;
          margin-top: 10px;
        }

        .nut-tabs__titles-item__text {
          color: #15181d;
        }
      }
    }

    .nut-tabs__content {
      display: none !important;
    }
  }
}
</style>
